<template>
  <view>
    <navigator class="grace-header" :url="url" :open-type='openType' v-if="url != ''">
      <view class="logo">
        <image :src="imgurl" mode="widthFix"></image>
      </view>
      <view class="content">
        <view class="title grace-blod">{{title}}</view>
        <view class="desc"><text class="tel">{{desc}}</text></view>
        <view class="desc"><text class="tel">{{descbr}}</text></view>
      </view>
      <!-- <view class="icon-right">添加</view> -->
         <view class="logo_add">
        <image src="/static/images/friendpagemq/addFriends.png" mode="widthFix"></image>
              </view>
    </navigator>
    <view class="grace-header" :url="url" :open-type='openType' v-if="url == ''">
      <view class="logo">
        <image :src="imgurl" mode="widthFix"></image>
      </view>
      <view class="content">
        <view class="title grace-blod">{{title}}</view>
        <view class="desc"><text class="tel">{{desc}}</text></view>
            <view class="desc"><text class="tel">{{descbr}}</text></view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: "GraceUI"
      },
      url: {
        type: String,
        default: ""
      },
      openType: {
        type: String,
        default: ""
      },
      desc: {
        type: String,
        default: ""
      },
        descbr: {
        type: String,
        default: ""
      },
      imgurl: {
        type: String,
        default: "../../static/imgs/logo.png"
      }
    },
    data() {
      return {

      };
    }
  }
</script>
<style>
.grace-header{width:92%; padding:20px 4%; background:#FFF; display:flex;  flex-wrap:nowrap; position:relative;  border-bottom:1px solid #E9E9E9;}
.grace-header .logo{width:40px;  margin:5px;  padding-left:25px; flex-shrink:0;}
.grace-header .logo_add{width:60px; margin:5px; flex-shrink:0; display: flex;align-items: center;} 
.grace-header .logo_add image{width:77upx; height:37upx; border-radius:5px;}
.grace-header .logo image{width:58upx; height:60px; border-radius:5px;}
.grace-header .content{width:100%;  height:60px;}
.grace-header .content .title{font-size:18px; line-height:0px; position: relative; left: -15px;}
.grace-header .content .desc{ color:#7F7F7F; font-size:13px;}
.grace-header .icon-right{width:30px; height:100%; line-height:100%; font-family:"grace-iconfont" !important; font-style:normal; position:absolute; z-index:1; top:0; right:0; display: flex; align-items:center; justify-content:center; font-size:22px;} 
.grace-header .icon-right:before{content:"\e601"; color:#B2B2B2;}
</style>